<template>
    <div class="box-container">
        <div class="box" v-for="item in props.cityList" :key="item.id">
            <img :src="item.thumbnail">
            <h3>{{ item.cityName }}</h3>
            <p>{{ item.summary }}</p>
            <a class="btn" @click="handleClick(item.id)">read more</a>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { updateViewCountAPI } from '@/api'

const router = useRouter()

const props = defineProps({
    cityList: {
        type: Array,
        default: []
    },
})

const handleClick = async (val) => {
    await updateViewCountAPI(val)
    router.push({
        path: "/layout/citydetail",
        query: {
            cityId: val
        }
    }).catch(err => { })
}


</script>


<style lang="scss" scoped>
.box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 3.2rem;

    .box {
        text-align: center;
        padding: 1rem 2.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);

        img {
            height: 26rem;
            width: 26rem;
            border-radius: 50%;
            margin-bottom: 1rem;
            border: none;
        }

        h3 {
            font-size: 2.2rem;
            color: green;
        }

        p {
            font-size: 1.5rem;
            padding: 1rem 3rem;
            color: #222;
            line-height: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn {
            border: .2rem solid #222;
            display: inline-block;
            cursor: pointer;
            margin-top: 1rem;
            padding: 1.2rem 2.2rem;
            font-size: 1.8rem;
            color: #222;
        }

        .btn:hover {
            color: #eee;
            background-color: #222;
        }
    }

}
</style>